<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>NewsDetail-</title>
    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/format.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://unpkg.com/@tailwindcss/browser@4" defer></script>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/sdk@latest/dist/index.js" type="module"></script> -->
    <script src="https://unpkg.com/@telegram-apps/sdk"></script>

    <style>
      .comment_box {
        transform: scale(0);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        /* border-radius: 10px; */
      }
      .comment_box .mask {
        display: inline-block;
        width: 100%;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: -1;
        position: absolute;
        top: -50px;
        left: 0;
      }

      .comment_box.active {
        opacity: 1;
        transform: scale(1);
      }

      .comment_list::-webkit-scrollbar {
        display: none;
      }

      .el-input__inner {
        appearance: none;
        background-color: rgb(255, 255, 255);
        background-image: none;
        box-sizing: border-box;
        color: rgb(96, 98, 102);
        display: inline-block;
        font-size: inherit;
        height: 100%;
        line-height: 50px;
        width: 80%;
        border-radius: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(220, 223, 230);
        border-image: initial;
        outline: none;
        padding: 0px 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
      .tooltip-container {
        background: rgb(3, 169, 244);
        background: linear-gradient(
          138deg,
          rgba(3, 169, 244, 1) 15%,
          rgba(63, 180, 233, 1) 65%
        );
        position: relative;
        cursor: pointer;
        height: 44px;
        width: 44px;
        border-radius: 100%;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center; }

      .tooltip-container svg {
        fill: #fff;
      }

    </style>
  </head>

  <body class="bg-white">
    <div class="p-4 pb-0">
      <h1 class="!text-[20px] font-semibold">
        Canada foreign minister takes Trump 51st state line 'very seriously'
      </h1>
      <!--pub time -->
      <div
        class="text-[#999] py-4 flex justify-between items-center"
        style="border-bottom: 1px solid rgb(230, 232, 234)"
      >
        <span>2 hours ago</span>
        <span>reading time: 3min</span>
      </div>
    </div>
    <div class="pb-[60px]">
      <div class="p-4 text-[14px] leading-[24px]">
        Canada's Foreign Minister Mélanie Joly has told the BBC she takes US
        President Donald Trump's remarks on making Canada the 51st state of his
        country "very seriously". "This is not a joke anymore," Joly told
        Newsnight. "There's a reason why Canadians, when they go out on a hockey
        game, are booing the American national anthem... We're insulted. We're
        mad. We're angry." Her comments come after Trump imposed 25% tariffs on
        products entering the US from Canada on Tuesday. Canada's Prime Minister
        Justin Trudeau called that a "very dumb thing to do" and announced
        retaliatory tariffs. However, US Commerce Secretary Howard Lutnick said
        Trump would "probably" announce a deal to reduce tariffs on Wednesday.
        In response, Joly told the BBC that "at the end of the day, the only one
        that really takes a decision is President Trump". She said no Trump
        administration secretaries had contacted their Canadian counterparts on
        Monday or Tuesday about tariffs.
      </div>
      <div>
        <img
          src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/34ba/live/27789930-f9b0-11ef-b257-2b725ccbdd87.jpg.webp"
          class="w-screen"
          alt=""
        />
      </div>

      <div class="p-4 text-[14px] leading-[24px]">
        Trump announced 25% tariffs on Canada and Mexico on 4 February, but
        delayed implementation until 4 March. Canadian energy imports face a 10%
        tariff. Ontario Premier Doug Ford implemented a 25% surcharge on
        electricity exports to three US states, and if tariffs escalated, said
        he would consider cutting Michigan, New York and Minnesota off from
        Canadian power. Trump also imposed a 10% tariff on goods worth more than
        $800 (£645) from China in February, which doubled in March. China
        responded with its own tariffs. The White House said when it introduced
        the tariffs that it was "taking bold action to hold [the three
        countries] accountable to their promises of halting illegal immigration
        and stopping poisonous fentanyl and other drugs from flowing into our
        country". Fentanyl is linked to tens of thousands of overdose deaths in
        the US each year. Trudeau said his country was responsible for less than
        1% of fentanyl entering the US. Canada had introduced new border
        security measures in December, in response to Trump's tariff threats
        before he took office. "We didn't want this trade war. We did everything
        that was required under the executive order to make sure our border was
        safe and secure," Joly told the BBC, but said "this is a bogus excuse on
        the part of the Trump administration against us".
      </div>
    </div>

    <!-- 操作区 -->
    <div
      class="py-2 px-10 w-screen h-[50px] fixed bottom-0 bg-white flex justify-between items-center"
      style="box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5)"
    >
      <div
        class="flex items-center text-[#666] text-[14px] cursor-pointer"
        id="shareBtn"
      >
        <img src="/assets/share2.png" class="w-[22px]" alt="" />
        <div class="h-[18px] ml-[3px]">Share</div>
      </div>
      <div
        class="flex items-center text-[#666] text-[14px] cursor-pointer"
        id="commentBtn"
      >
        <img src="/assets/comment.png" class="w-[22px]" alt="" />
        <div class="h-[18px] ml-[3px]">1776</div>
      </div>
      <div
        class="flex items-center text-[#666] text-[14px] cursor-pointer"
        id="likeBtn"
      >
        <img src="/assets/like.png" class="w-[22px]" alt="" />
        <div class="h-[18px] ml-[3px]">521</div>
      </div>
    </div>

    <!-- 評論區 -->
    <div
      class="w-screen h-screen fixed top-0 left-0 opacity-0 p-3 bg-white pb-[50px] comment_box"
    >
      <div class="mask"></div>
      <div class="relative h-full bg-white">
        <div class="flex justify-between items-center">
          <div class="font-bold text-[16px]">All comments</div>
          <div>
            <span class="text-blue-300 cursor-pointer">Hottest</span> |
            <span class="cursor-pointer">Newest</span> |
            <span class="cursor-pointer" id="closeComment">close</span>
          </div>
        </div>
        <div class="comment_list h-full mt-4 pb-10 overflow-auto">
          <div class="comment_list_item pl-[40px] relative pb-5">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/46313107?v=4"
                class="w-[34px] h-[34px] rounded-full top-0 left-0 absolute"
                alt=""
              />
              <div>
                <div>Noah</div>
                <div>2025/03/06</div>
              </div>
            </div>
            <div class="mt-1">
              The small but influential Gulf state is a key US ally in the
              region. It hosts a major American air base and has handled many
              delicate political negotiations, including with Iran, the Taliban
              and Russia.
            </div>
          </div>
          <div class="comment_list_item pl-[40px] relative pb-5">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/46313107?v=4"
                class="w-[34px] h-[34px] rounded-full top-0 left-0 absolute"
                alt=""
              />
              <div>
                <div>Noah</div>
                <div>2025/03/06</div>
              </div>
            </div>
            <div class="mt-1">
              The small but influential Gulf state is a key US ally in the
              region. It hosts a major American air base and has handled many
              delicate political negotiations, including with Iran, the Taliban
              and Russia.
            </div>
          </div>
          <div class="comment_list_item pl-[40px] relative pb-5">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/46313107?v=4"
                class="w-[34px] h-[34px] rounded-full top-0 left-0 absolute"
                alt=""
              />
              <div>
                <div>Noah</div>
                <div>2025/03/06</div>
              </div>
            </div>
            <div class="mt-1">
              The small but influential Gulf state is a key US ally in the
              region. It hosts a major American air base and has handled many
              delicate political negotiations, including with Iran, the Taliban
              and Russia.
            </div>
          </div>
          <div class="comment_list_item pl-[40px] relative pb-5">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/46313107?v=4"
                class="w-[34px] h-[34px] rounded-full top-0 left-0 absolute"
                alt=""
              />
              <div>
                <div>Noah</div>
                <div>2025/03/06</div>
              </div>
            </div>
            <div class="mt-1">
              The small but influential Gulf state is a key US ally in the
              region. It hosts a major American air base and has handled many
              delicate political negotiations, including with Iran, the Taliban
              and Russia.
            </div>
          </div>
          <div class="comment_list_item pl-[40px] relative pb-5">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/46313107?v=4"
                class="w-[34px] h-[34px] rounded-full top-0 left-0 absolute"
                alt=""
              />
              <div>
                <div>Noah</div>
                <div>2025/03/06</div>
              </div>
            </div>
            <div class="mt-1">
              The small but influential Gulf state is a key US ally in the
              region. It hosts a major American air base and has handled many
              delicate political negotiations, including with Iran, the Taliban
              and Russia.
            </div>
          </div>
          <div class="comment_list_item pl-[40px] relative pb-5">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/46313107?v=4"
                class="w-[34px] h-[34px] rounded-full top-0 left-0 absolute"
                alt=""
              />
              <div>
                <div>Noah</div>
                <div>2025/03/06</div>
              </div>
            </div>
            <div class="mt-1">
              The small but influential Gulf state is a key US ally in the
              region. It hosts a major American air base and has handled many
              delicate political negotiations, including with Iran, the Taliban
              and Russia.
            </div>
          </div>
          <div class="comment_list_item pl-[40px] relative pb-5">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/46313107?v=4"
                class="w-[34px] h-[34px] rounded-full top-0 left-0 absolute"
                alt=""
              />
              <div>
                <div>Noah</div>
                <div>2025/03/06</div>
              </div>
            </div>
            <div class="mt-1">
              The small but influential Gulf state is a key US ally in the
              region. It hosts a major American air base and has handled many
              delicate political negotiations, including with Iran, the Taliban
              and Russia.
            </div>
          </div>
        </div>
      </div>
      <form>
      <div
        class="fixed w-screen h-[60px] bottom-0 -ml-[12px] p-2 bg-white flex"
        style="box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5)"
      >
        <input
          type="text"
          autocomplete="off"
          placeholder="This is a comment section, not a no-man's land"
          class="el-input__inner flex-1 !mr-[10px]"
        />
        <button type="submit" class="tooltip-container">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              class="bi bi-send-fill"
              viewBox="0 0 16 16"
            >
              <path
                d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
              ></path>
            </svg>
        </div>
        </button>
      </div>
    </form>
    </div>

    <script>
      const {
        WebApp: { BackButton, initDataUnsafe },
        // WebView: { postEvent },
      } = window.Telegram;
      // TMA
      BackButton.show();
      BackButton.onClick(() => {
        if (window?.history.length > 1) {
          window.history.back();
        } else {
          router.replace("/");
        }
      });
      // SHARE
      const openTgLink = (url) => {
        TelegramWebviewProxy.postEvent("web_app_open_tg_link", {
          path_full: url,
        });
      };
      const handleInvite = () => {
        const desc = ``;
        const url = `/share/url?url=${encodeURIComponent(
          "https://t.me/HeadlinesNews_bot?startapp=Invite"
        )}&text=${encodeURIComponent(desc)}`;
        console.log(" ", url);
        openTgLink(url);
      };
      console.log(initDataUnsafe);

      $("#shareBtn").click(function () {
        handleInvite();
      });

      //
      $("#commentBtn").click(function () {
        let x = event.clientX;
        let y = event.clientY;

        // 设置初始 transform-origin
        $(".comment_box").css({
          "transform-origin": `${x}px ${y}px`,
          display: "block",
          // top: "50px",
        });

        // 添加 active 类，放大显示
        setTimeout(() => {
          document.body.style.overflow = "hidden";
          $(".comment_box").addClass("active");
          $(".mask").css("display", "inline-block");
        }, 10);
      });
      function closeComment() {
        document.body.style.overflow = "";
        $(".mask").css("display", "none");
        $(".comment_box").removeClass("active");

        // 过渡动画完成后隐藏
        setTimeout(() => {
          $(".comment_box").css("display", "none");
        }, 300);
      }
      $(".mask").click(closeComment);
      $("#closeComment").click(closeComment);

      $("#likeBtn").click(function () {
        alert("点赞");
      });
    </script>
  </body>
</html>
